<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息管理</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" ref="messageSearchForm" :model="messageSearch" class="demo-form-inline" @submit.native.prevent>

        <el-form-item label="消息标题" prop="messageTitle">
            <el-input v-model="messageSearch.messageTitle" placeholder="消息标题"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="searchMessage" native-type="submit">查询消息</el-button>
            <el-button type="warning" @click="resetSearchMessage">重置</el-button>
        </el-form-item>

    </el-form>
    <!--按钮-->
    <el-row>
        <el-button type="success" plain @click="confirmMessages">批量确认已读</el-button>
    </el-row>
    <!--  查看详细弹窗  -->
    <el-dialog
            title="查看详细"
            :visible.sync="dialogVisibleShow"
            width="40%"
            @close="message = {}">

        <el-form ref="showMessageForm" :model="message" label-width="80px">
            <el-form-item label="消息标题:">
                <div class="sub-title">{{ message.messageTitle }}</div>
            </el-form-item>

            <el-form-item label="消息内容:">
                <div class="sub-title">{{ message.messageContent }}</div>
            </el-form-item>
            <br>
        </el-form>
    </el-dialog>
    <br>
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                border
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="messageTitle"
                    label="消息标题"
                    align="center"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    label="消息内容"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-button type="info" @click="showDetail(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="messageDate"
                    label="发送时间"
                    align="center"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="confirmMessage(scope.row)">确认已读</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页工具条-->
        <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :current-page.sync="currentPage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
    </template>
    <br>
</div>

<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    //关闭控制台vue的提示
    Vue.config.productionTip = false;
    new Vue({
        el: "#app",
        //页面使用到的数据
        data() {
            return {
                //使用搜索的标志(默认关闭,在搜索一次后开启)
                searchFlag: 0,
                // 每页显示的条数
                pageSize: 10,
                // 总记录数
                totalCount: 0,
                // 当前页码
                currentPage: 1,
                //查看详细
                dialogVisibleShow: false,
                //页面信息
                userInfo: {},
                // 消息模型数据
                message: {
                    id: '',
                    messageTitle: '',
                    messageContent: '',
                    messageClass: '',
                    messageDate: ''
                },
                //消息搜索数据模型
                messageSearch: {
                    messageTitle: '',
                    messageClass: ''
                },
                //确认消息
                confirm: {
                    sid: '',
                    mid: '',
                    messageConfirm: ''
                },
                // 被选中的id数组
                selectedIds: [],
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据(静态数据)
                tableData: [
                    {
                        id: '1',
                        messageTitle: '1',
                        messageContent: '1',
                        messageClass: '1',
                        messageDate: '1'
                    },
                    {
                        id: '2',
                        messageTitle: '2',
                        messageContent: '2',
                        messageClass: '2',
                        messageDate: '2'
                    }
                ],
            }
        },
        mounted() {
            //保存用户数据到当前页面
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.selectAll();
        },
        methods: {
            // 查询所有消息数据并分页
            selectAll() {
                //如果使用过搜索功能，就将表格改成搜索的内容
                if (this.searchFlag === 1) {
                    this.searchMessage();
                } else {
                    axios({
                        method: "get",
                        url: "/message/selectBySid",
                        params: {
                            sid: this.userInfo.id,
                            currentPage: this.currentPage,
                            pageSize: this.pageSize,
                        },
                    }).then(res => {
                        this.tableData = res.data.tableData || [];
                        this.totalCount = res.data.totalCount;
                    }).catch(() => {
                        this.$message({
                            message: '查询失败!已为您加载静态数据',
                            type: 'warning'
                        });
                    })
                }
            },

            //显示消息内容弹窗
            showDetail(val) {
                this.message = val;
                axios({
                    method: "get",
                    url: "/message/selectById/" + this.message.id
                }).then(res => {
                    this.message = res.data;
                    this.dialogVisibleShow = true;
                }).catch(() => {
                    this.$message({
                        message: '数据异常！',
                        type: 'warning'
                    });
                })
            },

            //确认消息
            confirmMessage(val){
                this.$confirm('确认已读后将不再显示该消息，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.message = val;
                    axios({
                        method: "put",
                        url: "/message/updateStu",
                        params: {
                            sid: this.userInfo.id,
                            mid: this.message.id
                        }
                    }).then(() => {
                        this.selectAll()
                        this.$message({
                            message: '已确认已读！',
                            type: 'success'
                        })
                    }).catch(() => {
                        this.$message({
                            message: '数据异常！',
                            type: 'warning'
                        });
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消确认已读'
                    });
                });

            },

            //确认消息
            confirmMessages(){
                this.$confirm('确认已读后将不再显示该消息，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.id;
                    }
                    axios({
                        method: "post",
                        url: "/message/updateStus",
                        data: this.selectedIds,
                        params: {
                            sid: this.userInfo.id
                        }
                    }).then(() => {
                        this.selectAll()
                        this.$message({
                            message: '已确认已读！',
                            type: 'success'
                        })
                        this.selectedIds = []
                    }).catch(() => {
                        this.$message({
                            message: '数据异常！',
                            type: 'warning'
                        });
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消确认已读'
                    });
                });
                this.selectedIds = []
            },

            // 工具栏查询消息数据
            searchMessage() {
                axios({
                    method: "post",
                    url: "/message/selectBySidConditions",
                    params: {
                        sid: this.userInfo.id,
                        messageTitle: this.messageSearch.messageTitle,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    this.tableData = res.data.tableData || [];
                    this.totalCount = res.data.totalCount;
                    this.searchFlag = 1;//搜索成功的标志
                }).catch(() => {
                    this.$message({
                        message: '数据异常！',
                        type: 'warning'
                    })
                })
            },

            //重置查询
            resetSearchMessage(){
                this.resetForm('messageSearchForm')
                this.searchFlag = 0
                this.selectAll()
            },

            //表格颜色，偶数绿色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },

            // 复选框选中后执行的方法，
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //设置左侧每次显示多少条信息
            handleSizeChange(val) {
                // 重新设置每页显示的条数
                this.pageSize = val;
                this.selectAll();
            },

            //设置右侧跳转多少页
            handleCurrentChange(val) {
                // 重新设置当前页码
                this.currentPage = val;
                this.selectAll();
            },

            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

        }
    })
</script>
</body>
</html>